<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>消息详情</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/app.css?a=1111"/>
</head>
<body class="isHide">
<div class="ft-wrap height top bto">
    <!--顶部悬浮导航-->
    <div class="ft-head-nav">
        <a class="ft-h-back" href="javascript:;">返回</a>
        <span class="ft-head-text">Message details</span>
    </div>
    <!--中间滚动内容-->
    <div class="ft-container no-padding height background">
        <div class="ft-overflow" id="LatestFlow">
            <div class="ft-overflow-box">
                <div class="forum-list">
                    <div class="ft-module no-top no-mar evaluate-box">
                        <div class="module-hd has-icon no-border bigger">
                            <i class="evaluate-head"><img src="../img/ft-hd1.jpg"></i>
                            <label class="">Jason Smith</label>
                            <span class="">2017-03-24  12:53:02</span>
                        </div>
                        <div class="module-bd no-pad">
                            <div class="evaluate-shop-intro">
                                <div class="evaluate-cont">
                                    <span class="no-border">"very happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and</span>
                                    <div class="upload-flies box-list">
                                        <ul class="row-3 width">
                                            <li>
                                                <label>
                                                    <img class="lazy" data-original="../img/ft-hd1.jpg"
                                                         src="../img/pro-error.jpg">
                                                    <span class="pro-img-loading"></span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <img class="lazy" data-original="../img/ft-hd2.jpg"
                                                         src="../img/pro-error.jpg">
                                                    <span class="pro-img-loading"></span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <img class="lazy" data-original="../img/ft-hd3.jpg"
                                                         src="../img/pro-error.jpg">
                                                    <span class="pro-img-loading"></span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <img class="lazy" data-original="../img/ft-hd4.jpg"
                                                         src="../img/pro-error.jpg">
                                                    <span class="pro-img-loading"></span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <img class="lazy" data-original="../img/ft-hd5.jpg"
                                                         src="../img/pro-error.jpg">
                                                    <span class="pro-img-loading"></span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <img class="lazy" data-original="../img/ft-hd6.jpg"
                                                         src="../img/pro-error.jpg">
                                                    <span class="pro-img-loading"></span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <img class="lazy" data-original="../img/ft-hd7.jpg"
                                                         src="../img/pro-error.jpg">
                                                    <span class="pro-img-loading"></span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <img class="lazy" data-original="../img/ft-hd8.jpg"
                                                         src="../img/pro-error.jpg">
                                                    <span class="pro-img-loading"></span>
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <img class="lazy" data-original="../img/ft-hd11.jpg"
                                                         src="../img/pro-error.jpg">
                                                    <span class="pro-img-loading"></span>
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ft-module evaluate-box forum-box">
                        <div class="module-hd">
                            <label class="normal bigger">Comment <span>6875</span></label>
                            <label class="normal float-right">
                                <a class="handle reply reply-details" href="javascript:;">Reply</a>
                                <a class="handle forum-praise active" href="javascript:;">
                                    <i class="ft-sprite praise-icon"></i>
                                    <span>10500</span>
                                </a>
                            </label>
                        </div>
                        <div class="module-bd no-pad pad-left">
                            <div class="forum-message-list">
                                <div class="forum-message-item">
                                    <div class="module-hd has-icon no-border bigger">
                                        <i class="evaluate-head"><img src="../img/ft-hd1.jpg"></i>
                                        <label class="">Jason Smith</label>
                                        <span class="">2017-03-24  12:53:02</span>
                                    </div>
                                    <div class="evaluate-cont pad-left">
                                        <span class="no-border">"very happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and</span>
                                    </div>
                                </div>
                                <div class="forum-message-item">
                                    <div class="module-hd has-icon no-border bigger">
                                        <i class="evaluate-head"><img src="../img/ft-hd2.jpg"></i>
                                        <label class="">Xu Jiqiang</label>
                                        <span class="">2017-03-24  12:53:02</span>
                                    </div>
                                    <div class="evaluate-cont pad-left">
                                        <span class="no-border">"very happy. Alittle. for price andvery happy. Alittle. for price andvery happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and</span>
                                    </div>
                                </div>
                                <div class="forum-message-item">
                                    <div class="module-hd has-icon no-border bigger">
                                        <i class="evaluate-head"><img src="../img/ft-hd10.jpg"></i>
                                        <label class="">Jason Smith</label>
                                        <span class="">2017-03-24  12:53:02</span>
                                    </div>
                                    <div class="evaluate-cont pad-left">
                                        <span class="no-border">"very happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-loading">
                    <i><img src="../img/loading.gif"></i>
                    <span>Loading</span>
                </div>
            </div>
        </div>
    </div>
    <!--底部确认悬浮-->
    <div class="details-buy border">
        <div class="buy-bar forum-submit">
            <label><input type="text" value="" placeholder="评论"></label>
            <a class="ft-btn" href="javascript:;">Reply</a>
        </div>
    </div>

    <!--显示产品大图-->
    <div class="ft-pop-disk product-big animated-left">
        <div class="ft-pop-box">
            <div class="ft-disk-hd">
                <span class="ft-disk-title" id="productLength"><i>12</i> of <i>12</i></span>
                <a class="ft-close-btn"><i class="ft-sprite"></i></a>
            </div>
            <div class="ft-disk-bd">
                <div class="product-big-list">
                    <div class="swiper-container" id="productBig">
                        <div class="swiper-wrapper"></div>
                        <div class='swiper-loading2'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--下方回复评论-->
    <div class="ft-pop-disk shipping-pop-disk">
        <div class="shop-shipping-box animated-bottom">
            <div class="pos-abs-tl ft-disk-hd shipping-hd ft-head-nav background">
                <a class="ft-close-btn" href="javascript:;"><i class="ft-sprite"></i></a>
                <span class="ft-disk-title">Reply comments</span>
                <a class="ft-more-text text-btn" href="javascript:;">Send</a>
            </div>
            <div class="ft-disk-bd">
                <div class="ft-overflow-hide shipping-bd">
                    <label class="reply-textarea">
                        <textarea cols="" rows="" placeholder="reply comments"></textarea>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <!--置顶按钮-->
    <a class="pos-fix go-top" href="javascript:;" id="goTop"><img src="../img/icon-top.png"></a>
</div>

<script type="text/template" id="productListCont">
    <div class="forum-message-item">
        <div class="module-hd has-icon no-border bigger">
            <i class="evaluate-head"><img src="../img/ft-hd%*Head*%.jpg"></i>
            <label class="">%*Name*%</label>
            <span class="">%*Time*%</span>
        </div>
        <div class="evaluate-cont pad-left">
            <span class="no-border">加载数据："very happy. Alittle. for price and quality. more the worth hem job very happy."</span>
        </div>
    </div>
</script>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/swiper.jquery.min.js"></script>
<script src="../js/jquery.lazyload.min.js"></script>
<script src="../js/ft-common.js"></script>
<script src="../js/pageScript.js"></script>
<script>
    $(function () {
        //页面滚动
        function scrollFun(ele) {
            var ajaxDataNum = 0, downflag = false;
            return pageScroll({
                hasTop: true,
                element: "#" + ele,
                ajaxFun: function () {
                    var $active = $("#LatestFlow");
                    if (!downflag) {
                        downflag = true;
                        var list = $("#productListCont").html();
                        var str = "";
                        for (var i = 0; i < 2; i++) {
                            str += list.replace("%*Head*%", (i + 1)).replace("%*Name*%", "Xu Jiqiang" + (i + 1)).replace("%*Time*%", getNowTime());
                        }
                        setTimeout(function () {
                            ajaxDataNum++;
                            if (ajaxDataNum >= 5) {
                                $active.find(".list-loading").html("No more items");
                                return false;
                            }
                            $active.find(".forum-message-list").append(str);
                            downflag = false;
                        }, 1000);
                    }
                }
            });
        }

        var scrollEle = scrollFun("LatestFlow");

        function setImgBox(img, ele) {
            var $upload = $(".upload-flies");
            var w_w = $(window).width() - 20;
            $upload.each(function () {
                var list = $(this).data("list");
                var type = $(this).data("type");
                list = !list ? 3 : parseInt(list);
                var cell_w = w_w / list;
                type != "square" ?
                        $(this).find("label").css({"width": cell_w + "px"}) :
                        $(this).find("label").css({"width": cell_w + "px", "height": cell_w + "px"});
            });
            proImgLazyLoad(img, ele, function () {
                var that = $(this);
                var ceil_w = Math.ceil(that.parents("label").width());
                var ceil_h = Math.ceil(that.parents("label").height());
                common.setImageLayout(this, ceil_w, ceil_h);
            });
        }

        $(window).resize(function () {
            setImgBox(".upload-flies", ".ft-overflow");
        }).trigger("resize");

        //显示评价大图
        $(document).on("click", ".upload-flies li", function (e) {
            var that = this;
            e.stopPropagation();
            showBigImg({
                loadingEle: ".swiper-loading2",
                swiperEle: null,
                clickEle: that,
                animateEle: ".product-big"
            })
        });

        //点赞
        $(document).on("click", ".forum-praise", function () {
            $(this).toggleClass("active");
            var span = $(this).find("span");
            var num = parseInt(span.text());
            !$(this).hasClass("active") ? span.text(num - 1) : span.text(num + 1);
        });

        //获取当前时间
        function getNowTime() {
            var myDate = new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth() + 1;
            var date = myDate.getDate();
            var h = myDate.getHours();
            var m = myDate.getMinutes();
            var s = myDate.getSeconds();

            return year + '-' + common.padZero(month, 2) + "-" + common.padZero(date, 2) + " " + common.padZero(h, 2) + ':' + common.padZero(m, 2) + ":" + common.padZero(s, 2);
        }

        //显示运费详情
        popLeftMenu({
            clickEle: ".reply-details",
            diskEle: ".shipping-pop-disk",
            animateEle: ".shop-shipping-box"
        });
        //关闭窗口
        $(".ft-close-btn").click(function () {
            $(".shipping-pop-disk").click();
        });
    })
</script>
</body>
</html>